<template>
  <div>
    <el-table
        :data="tableData"
        :class="{tableTopLevel1: topLevel === 1, tableTopLevel2: topLevel === 2, tableTopLevel3: topLevel === 3, tableTopLevelDefault: topLevel === -1}"
        row-key="id"
        border
        max-height="510"
        @selection-change="handleSelectionChange">
      <el-table-column
          fixed
          type="selection"
          width="55">
      </el-table-column>
      <el-table-column
          fixed
          prop="dictTypeName"
          label="字典类别名"
          sortable
          width="160">
      </el-table-column>
      <el-table-column
          prop="dictTypeKey"
          label="字典类别key"
          sortable
          width="120">
      </el-table-column>
      <el-table-column
          prop="dictStatus"
          label="状态"
          :formatter="statusFormtter"
          width="100">
      </el-table-column>
      <el-table-column
          prop="dictSort"
          label="排序"
          width="100">
      </el-table-column>
      <el-table-column
          prop="remark"
          label="备注"
          width="100">
      </el-table-column>
      <el-table-column
          prop="gmtCreate"
          label="创建时间"
          width="160">
      </el-table-column>
      <el-table-column
          prop="createBy"
          label="创建人"
          width="140">
      </el-table-column>
      <el-table-column
          label="操作">
        <template slot-scope="scope">
          <el-button v-if="editShow" type="primary" @click="editDictType(scope.row.id)" size="mini">修改</el-button>
          <el-button v-if="dataAdminShow" type="primary" @click="manageDictData(scope.row.id)" size="mini">管理数据</el-button>
          <el-button v-if="delShow" type="primary" @click="deleteDictType(scope.row.id)" size="mini">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <PageC :handleSizeChange="handleSizeChange" :handleCurrentChange="handleCurrentChange" :pageSize="pageSize" :total="total" :currentPage="currentPage"></PageC>
  </div>
</template>

<script>
import {getDictTypes, deleteDictTypeById} from "@/api/dict-type";
import PageC from "@/components/PageC";
import {Message} from "element-ui";

export default {
  name: "DictTypeTable",
  components: {PageC},
  data() {
    return {

    }
  },
  props: {
    topLevel: {
      required: false,
      default: -1,
      type: Number
    },
    editShow: {
      required: true,
      default: false,
      type: Boolean
    },
    delShow: {
      required: true,
      default: false,
      type: Boolean
    },
    dataAdminShow: {
      required: true,
      default: false,
      type: Boolean
    },
  },
  computed: {
    tableData: {
      get() {
        return this.$store.state.dictType.tableData;
      },
      set(value) {
        this.$store.state.dictType.tableData = value;
      }
    },
    // 选中行id
    multipleSelection: {
      get() {
        return this.$store.state.dictType.multipleSelection;
      },
      set(value) {
        this.$store.state.dictType.multipleSelection = value;
      }
    },
    total: {
      get() {
        return this.$store.state.dictType.total;
      },
      set(value) {
        this.$store.state.dictType.total = value;
      }
    },
    pageSize: {
      get() {
        return this.$store.state.dictType.pageSize;
      },
      set(value) {
        this.$store.state.dictType.pageSize = value;
      }
    },
    currentPage: {
      get() {
        return this.$store.state.dictType.currentPage;
      },
      set(value) {
        this.$store.state.dictType.currentPage = value;
      }
    }
  },
  methods: {
    statusFormtter(row) {
      return row.dictStatus === "0" ? "正常":"禁用"
    },
    handleSelectionChange(val) {
      this.multipleSelection = val.map((item) => {return item.id;})
    },
    getDictTypes() {
      var params = {
        "current": this.currentPage,
        "size": this.pageSize
      };
      // 刷新
      getDictTypes(params).then((res) => {
        this.tableData = res.data.data;
        this.total = res.data.total;
      })
    },
    editDictType(id) {
      this.$store.dispatch("dictType/editDictType", id);
    },
    manageDictData(id) {
      this.$store.state.dictData.dictDataForm.dictTypeId = id;
      this.$router.push(`/dict/data/${id}`)
    },
    deleteDictType(id) {
      this.$confirm('此操作将永久删除该字典类型, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteDictTypeById(id).then((res) => {
          Message.success(res.data.msg);
          this.getDictTypes();
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.getDictTypes();
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.getDictTypes();
    }
  },
  mounted() {
    this.getDictTypes();
  }
}
</script>

<style scoped>

</style>
